<!--  -->
<template>
  <div class="clew">
      <div class="navs">
          <Navs @toGo="goBi"/>
      </div>
      <div class="bales">
            <component :is="currentTabComponent"></component>
      </div>
  </div>
</template>

<script>
import Navs from '@/components/admin/tubguest/clew/Navs.vue'
import Mine from '@/components/admin/tubguest/clew/Mine.vue'
import Dealer from '@/components/admin/tubguest/clew/Dealer.vue'
import Dynamic from '@/components/admin/tubguest/clew/Dynamic.vue'
export default {
  components: {
      Navs,
      Mine,
      Dealer,
      Dynamic
  },
  data() {
    return {
        currentIndex: 0,
        arr:["Mine","Dealer","Dynamic"]
    }
  },
  created() {},
  methods: {
      goBi(data){
          this.currentIndex=data
      }
  },
  computed: {
    currentTabComponent() {
      return this.arr[this.currentIndex]


    },
  },
}
</script>
<style lang='scss' scoped>
.clew{
  width: 100%;
  background: #F0F2F5;
  height: auto;
    .navs{
        width: 100%;
        height: 66px;
        background: #fff;
    }
    .bales{
        margin-top:20px;
        width: 100%;
        height: auto;
        background: #fff;
        
    }
}
</style>
